<template>
  <div>
    <div class="view-index">
      <balance v-for="(item,index) in listData" :key="index" :item="item" draggable="true" class="c-balance" :style="position[Number(item.busiNo)-1]" />
      <!-- </vdraggable> -->
    </div>
  </div>
</template>

<script>
import { showIndex } from '@/api/market.js'
// import vdraggable from 'vuedraggable'
import balance from '@/components/StallBalance/index'
export default {
  name: 'Index',
  components: {
    balance
  },
  data() {
    return {
      interval: '',
      listData: [],
      position: [
        {
          left: '3%',
          top: '13%'
        },
        {
          left: '15%',
          top: '5%'
        },
        {
          left: '32%',
          top: '5%'
        },
        {
          left: '58%',
          top: '2%'
        },
        {
          left: '68%',
          top: '10%'
        },
        {
          left: '68%',
          top: '25%'
        },
        {
          left: '68%',
          top: '35%'
        },
        {
          left: '68%',
          top: '50%'
        },
        {
          left: '80%',
          top: '52%'
        },
        {
          left: '88%',
          top: '61%'
        },
        {
          left: '88%',
          top: '71%'
        },
        {
          left: '88%',
          top: '80%'
        },
        {
          left: '88%',
          top: '88%'
        },
        {
          left: '86%',
          top: '95%'
        },
        {
          left: '79%',
          top: '92%'
        },
        {
          left: '67%',
          top: '92%'
        },
        {
          left: '55%',
          top: '92%'
        },
        {
          left: '36%',
          top: '92%'
        },
        {
          left: '25%',
          top: '92%'
        },
        {
          left: '14%',
          top: '92%'
        },
        {
          left: '9%',
          top: '91%'
        },
        {
          left: '9%',
          top: '86%'
        },
        {
          left: '9%',
          top: '76%'
        },
        {
          left: '22%',
          top: '76%'
        },
        {
          left: '18%',
          top: '68%'
        },
        {
          left: '18%',
          top: '60%'
        },
        {
          left: '18%',
          top: '50%'
        },
        {
          left: '22%',
          top: '36%'
        },
        // 29
        {},
        {
          left: '50%',
          top: '16%'
        },
        {
          left: '59%',
          top: '16%'
        },
        {
          left: '30%',
          top: '27%'
        },
        {
          left: '41%',
          top: '27%'
        },
        {
          left: '41%',
          top: '40%'
        },
        {
          left: '30%',
          top: '40%'
        },
        {
          left: '30%',
          top: '46%'
        },
        {
          left: '41%',
          top: '46%'
        },
        {
          left: '41%',
          top: '58%'
        },
        {
          left: '30%',
          top: '58%'
        },

        {
          left: '30%',
          top: '64%'
        },
        {
          left: '41%',
          top: '64%'
        },
        {
          left: '41%',
          top: '76%'
        },
        {
          left: '30%',
          top: '76%'
        },
        // 第二排
        {
          left: '49%',
          top: '27%'
        },
        {
          left: '60%',
          top: '27%'
        },
        {
          left: '60%',
          top: '40%'
        },
        {
          left: '49%',
          top: '40%'
        },
        {
          left: '49%',
          top: '46%'
        },
        {
          left: '60%',
          top: '46%'
        },
        {
          left: '60%',
          top: '58%'
        },
        {
          left: '49%',
          top: '58%'
        },

        {
          left: '49%',
          top: '64%'
        },
        {
          left: '60%',
          top: '64%'
        },
        {
          left: '60%',
          top: '76%'
        },
        {
          left: '49%',
          top: '76%'
        },
        {
          left: '79%',
          top: '85%'
        },
        {
          left: '79%',
          top: '77%'
        },
        {
          left: '76%',
          top: '64%'
        },
        {
          left: '74%',
          top: '77%'
        },
        {
          left: '74%',
          top: '85%'
        },
        {
          left: '63%',
          top: '86%'
        },
        {
          left: '48%',
          top: '86%'
        },
        {
          left: '42%',
          top: '86%'
        },
        {
          left: '30%',
          top: '86%'
        },
        {
          left: '24%',
          top: '86%'
        },
        {
          left: '13%',
          top: '86%'
        }
      ]
    }
  },
  created() {
    this.showCanvas()
    this.interval = setInterval(() => {
      this.showCanvas()
    }, 1000 * 60 * 5)
    // this.interval();
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },

  methods: {
    showCanvas() {
      showIndex().then(res => {
        // 循环设定定时器和改变状态码
        res.data.forEach(item => {
          (() => {
            if (item.flashTime > 0) {
              this.$set(item, 'status', item.status + 1)
              setTimeout(() => {
                console.log('触发了定时器函数')
                this.$set(item, 'status', item.status - 2)
              }, item.flashTime * 1000)
              console.log(
                '设置了定时器，摊位为' + item.busiNo + '时间为' + item.flashTime
              )
            } else {
              this.$set(item, 'status', item.status - 1)
            }
          })(item)
        })
        this.listData = res.data
        console.log(res)
      })
    }
  }
}
</script>
<style>
/* #market-png {
  width: 600px;
  height: calc(100vh - 195px);
} */
.view-index {
  position: relative;
  margin-left: 300px;
  width: 600px;
  /* width: fit-content; */
  height: calc(100vh - 180px);
  background-image: url("../assets/imageSet/ld_market.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.c-balance {
  position: absolute;
}
</style>
